<template>
    <div style="height:100%;width:100%;">
        <bar class="bar" @on-back="$router.back()" title="我的加油机"></bar>
        <group class="myTanker-block">
            <cellBox>
                <div><img src="../../../assets/logo1.png"
                          style="vertical-align: middle;height:35px;margin-right:10px;"/>油巴加油机管理平台
                </div>
            </cellBox>
        </group>
        <group>
            <cell title="加油机编号" :value="item.tankerId"></cell>
            <cell title="加油机名称" is-link :value="item.name"
                  @click.native="$router.push('/tankerName/' + $route.params.index)"></cell>
            <cell title="油种" is-link :value="item.oilType" @click.native="show2 = true"></cell>
            <cell title="型号" is-link :value="item.modelType" @click.native="show1 = true"></cell>
            <cell title="单价(元/升)" is-link :value="item.price"
                  @click.native="$router.push('/tankerPrice/' + $route.params.index)"></cell>
            <cell title="安装地址" is-link :value="item.installAddr"
                  @click.native="$router.push('/tankerAddr/' + $route.params.index)"></cell>
            <cell title="安装时间" :value="item.installDate"></cell>
            <cell title="总加油量(升)" :value="item.fuelCharge"></cell>
            <cell title="剩余油量(升)" is-link @click.native="$router.push('/addOli/' + $route.params.index)">
                <span style="color:#44b549">{{item.remainFuel}}</span>
            </cell>
            <cell title="总加油次数" :value="item.fuelCount"></cell>
        </group>
        <actionsheet v-model="show1" :menus="menus1" @on-click-menu="editModelType"></actionsheet>
        <actionsheet v-model="show2" :menus="menus2" @on-click-menu="editOilType"></actionsheet>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'

    import {
        lang
    } from 'muka'
    import {
        Bar,
        Layout,
        MInput,
        Mask,
        InputControl
    } from 'muka-ui'
    import {
        Group,
        Cell,
        CellBox,
        Actionsheet,
        XButton,
        Confirm
    } from 'vux'
    import md5 from 'js-md5'

    export default {
        name: 'detailOnly',
        components: {
            Bar,
            Group,
            Cell,
            CellBox,
            Actionsheet,
            Layout,
            XButton,
            'mu-input': MInput,
            'mu-mask': Mask,
            InputControl,
            Confirm
        },
        data: function () {
            return {
                item: {},

                showName: false,
                showPrice: false,
                showInstallAddr: false,
                showRemainFuel: false,
                installAddr: '',
                price: '',
                show: false,
                inShow: true,
                comShow: false,
                value: '',
                name: '',
                remainFuel: '',
                password: '',
                show1: false,
                menus1: {
                    '0': '10#',
                    '1': '5#',
                    '2': '0#',
                    '3': '-10#',
                    '4': '-20#',
                    '5': '-30#'
                },
                show2: false,
                menus2: {
                    '0': '柴油',
                    '1': '汽油'
                },
                countVal: ''
            }
        },
        created: function () {
            this.item = this.tankerList[this.$route.params.index]
            this.name = this.item.name
            this.price = this.item.price
            this.installAddr = this.item.installAddr
            this.countVal = this.item.remainFuel
        },
        computed: mapState([
            VUEX_NAME.tankerList
        ]),
        watch: {
            'item.oilType': function (newVal) {
                if (newVal === '柴油') {
                    this.menus1 = {
                        '0': '10#',
                        '1': '5#',
                        '2': '0#',
                        '3': '-10#',
                        '4': '-20#',
                        '5': '-30#'
                    }
                } else {
                    this.menus1 = {
                        '0': '89#',
                        '1': '92#',
                        '2': '95#',
                        '3': '98#'
                    }
                }
            }
        },
        methods: {
            ...mapMutations([
                VUEX_NAME.uTanker // 映射 this.increment() 为 this.$store.commit('increment')
            ]),
            editModelType: function (index) {
                let modelType = this.menus1[index]
                this.$ajax(
                    'mch/editTanker',
                    {
                        tankerId: this.item.tankerId,
                        modelType: modelType
                    },
                    (content) => {
                        this.item.modelType = modelType
                    }, true)
            },
            editOilType: async function (index) {
                let oilType = this.menus2[index]
                this.$ajax(
                    'mch/editTanker',
                    {
                        tankerId: this.item.tankerId,
                        oilType: oilType
                    },
                    (content) => {
                        this.item.oilType = oilType
                    }, true)
            }
        }
    }

</script>
<style lang="less">
    .myTank-i {
        color: white;
        background-color: #2f87ce;
        padding: 3px 5px;
        border-radius: 3px;
        margin: 0 3px;
    }

    .layout {
        background: white;
        position: absolute;
        top: ~'calc(30% - 72px)';
        text-align: center;
        border-radius: 3px;
        padding: 15px 0;
        width: 260px;
        left: ~'calc(50% - 130px)';
        line-height: 30px;
        .layout-title {
            font-size: 16px;
            border-bottom: 1px solid #b9b9b9;
        }
        .layout-label {
            font-size: 14px;
        }
        .layout-amount {
            font-size: 18px;
        }
        .layout-input {
            border: 1px solid #b9b9b9;
            margin: 0;
            padding: 0;
            letter-spacing: 24px;
            text-indent: 12px;
            outline: none;
            font-weight: 800;
            line-height: 35px;
            width: 100%;
            height: 35px;
            font-size: 40px;
            text-align: left;
        }
        .layout-repeat {
            position: absolute;
            display: inline-block;
            height: 35px;
            top: 1px;
            border-right: 1px solid #b9b9b9;
        }
    }

</style>
